<template>
    <div class="formdeList">
        <a-form-model :model="config">
            <a-form-model-item :label="$comi18('rxDialog.name', '标题')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input  v-model="config.name"></a-input>
            </a-form-model-item>

            <a-form-model-item :label="$ti18('rxForm.rxAlias', '别名')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <a-input  v-model="config.alias"></a-input>
            </a-form-model-item>

            <a-checkbox v-model="config.showName" style="margin-left: 10px">{{i18n('form.titleDisplay','标题展示')}}</a-checkbox>
            <a-checkbox class="formChenckbox" v-model="config.fullBtn">{{customViewI18n('fullBtn','全屏按钮')}}</a-checkbox>

            <a-form-model-item :label="i18n('form.customQuery','自定义查询')" :labelCol="labelCol" :wrapperCol="wrapperCol">
                <rx-input-button v-model="config.customSql" @click="openCustomData" @input="handInput"></rx-input-button>
            </a-form-model-item>



        </a-form-model>
        <a-tabs default-active-key="1">
            <a-tab-pane key="1">
                <span slot="tab"> {{$comi18('listDef.receiveData','接收数据配置')}} </span>
                <a-form-model :model="config.receive">
                    <a-form-model-item :label="$comi18('formDef.queryParamSource', '查询参数来源')">
                        <a-select
                            default-value="url"
                            v-model="config.receive.type"
                            :options="sourceAry"
                            :getPopupContainer="(p) => p.parentNode"
                            :allowClear="true"
                        >
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item :label="$comi18('formDef.deployeEvent', '发布事件组件')" v-if="config.receive.type == 'event'">
                        <a-select
                            v-model="config.receive.publishComponent"
                            :options="publishComponent"
                            allowClear
                            @change="changeComponent"
                            :getPopupContainer="(p) => p.parentNode"
                        >
                        </a-select>
                    </a-form-model-item>
                    <a-form-model-item :label="$comi18('listDef.primary', '参数映射')">
                        <a-button-group class="abuttonhert">
                            <a-button class="abutton" @click="addParams">
                                <i class="iconjia iconfont"></i>
                            </a-button>
                            <a-button class="abutton" @click="removeSelect()">
                                <i class="icontrash iconfont"></i>
                            </a-button>
                        </a-button-group>
                        <a-table
                            :dataSource="config.receive.mapping"
                            :pagination="false"
                            :rowSelection="receiveRowSelection"
                            rowKey="idx_"
                            :bordered="true"
                        >
                            <a-table-column :title="$comi18('rxDialog.paramName', '参数名称')" dataIndex="name">
                                <template slot-scope="text, record">
                                    <a-select
                                        v-model="record.name"
                                        :options="paramsDef"
                                        :getPopupContainer="(p) => p.parentNode"
                                        :allowClear="true"
                                    >
                                    </a-select>
                                </template>
                            </a-table-column>
                            <a-table-column :title="$comi18('formDef.valueSource', '值来源')" dataIndex="valueSource">
                                <template slot-scope="text, record">
                                    <a-select
                                        v-model="record.valueSource"
                                        :options="valueSourceDef"
                                        :getPopupContainer="(p) => p.parentNode"
                                        :allowClear="true"
                                        :dropdownMatchSelectWidth="false"
                                    >
                                    </a-select>
                                </template>
                            </a-table-column>
                            <a-table-column :title="i18n('list.paramValue','参数值')" dataIndex="valueDef">
                                <template slot-scope="text, record">
                                    <a-select
                                        v-model="record.valueDef"
                                        :options="componentParamsDef"
                                        :allowClear="true"
                                        :dropdownMatchSelectWidth="false"
                                        :popupClassName="'my-select'"
                                        :getPopupContainer="(p) => p.parentNode"
                                        v-if="config.receive.type == 'event' && record.valueSource == 'param'"
                                    >
                                    </a-select>
                                    <a-select
                                        v-model="record.valueDef"
                                        :options="params"
                                        :allowClear="true"
                                        :dropdownMatchSelectWidth="false"
                                        :popupClassName="'my-select'"
                                        :getPopupContainer="(p) => p.parentNode"
                                        v-if="config.receive.type == 'url' && record.valueSource == 'param'"
                                    >
                                    </a-select>
                                    <a-input v-model="record.valueDef" v-if="record.valueSource == 'fixedVar'"></a-input>
                                    <a-input-group v-if="record.valueSource == 'script'" compact>
                                       <div style="display: flex">
                                           <a-input style="flex:1;margin-right: 0px" v-model="record.valueDef" />
                                           <a-button @click="openScriptQuery(record)">...</a-button>
                                       </div>
                                    </a-input-group>
                                    <a-select
                                        v-if="record.valueSource == 'constantVar'"
                                        v-model="record.valueDef"
                                        :options="constantField"
                                        allowClear
                                        :dropdownMatchSelectWidth="false"
                                        :popupClassName="'my-select'"
                                        :getPopupContainer="(p) => p.parentNode"
                                    ></a-select>
                                </template>
                            </a-table-column>
                        </a-table>
                    </a-form-model-item>
                </a-form-model>
            </a-tab-pane>
            <a-tab-pane key="2">
                <span slot="tab"> {{$comi18('listDef.publishData', '发布数据配置')}}</span>
                <a-form-model-item :label="$comi18('listDef.unitParams', '组件参数')">
                    <a-table :dataSource="config.publish.paramMapping" :pagination="false" :bordered="true">
                        <a-table-column :title="$comi18('listDef.val', '值')" dataIndex="key">
                            <template slot-scope="text, record">
                                <span v-text="text"></span>
                            </template>
                        </a-table-column>
                        <a-table-column :title="$comi18('listDef.field', '字段')" dataIndex="label">
                            <template slot-scope="text, record">
                                <span v-text="text"></span>
                            </template>
                        </a-table-column>
                    </a-table>
                </a-form-model-item>
            </a-tab-pane>
        </a-tabs>
        <a-divider />
        <a-form-model>
            <a-form-item  :label="i18n('form.Mode','模式')">
                <a-radio-group v-model="config.mode">
                    <a-radio value="config">{{i18n('form.configTem','配置模板')}}</a-radio>
                    <a-radio value="file">{{i18n('list.vueFile','Vue文件')}}</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item  :label="i18n('list.template','模板') + '(HTML)'" v-if="config.mode=='config'">
                <a-button @click="openCustomViewTemplate()">{{i18n('form.configTem','配置模板')}}</a-button>
            </a-form-item>
            <a-form-item  :label="i18n('list.path','路径')"  v-if="config.mode=='file'">
                <a-input v-model="config.path" :placeholder="i18n('list.vueFilePath','Vue文件路径')" style="width:90%;margin-right: 5px;"/>
                <a-tooltip :getPopupContainer="p=>p.parentNode">
                    <template slot="title" >
                        {{i18n('msg.message','组件路径是src/views目录下的组件，例如' +
                        '流程定义的文件路径为src/views/modules/bpm/core/BpmDefList.vue' +
                        '那么在组件配置时配置为:modules/bpm/core/BpmDefList.vue')}}

                    </template>
                    <a-icon type="question-circle-o"/>
                </a-tooltip>
            </a-form-item>
            <a-form-item  :label="i18n('form.buttonConfiguration','按钮配置')" >
                <a-button @click="openButtonConfig()">{{i18n('form.buttonConfiguration','按钮配置')}}</a-button>
            </a-form-item>
        </a-form-model>
    </div>
</template>

<script>
import ComponentDef from "@/views/modules/form/core/formComponent/ComponentDef";
import {Dialog, Util,GridMixin} from "@lowcode/jpaas-common-lib";
import FormCustomQueryApi from "@/api/form/core/formCustomQuery";
import CustomViewTemplate from './CustomViewTemplate';
import CustomButtonConfig from './customButton/CustomButionConfig.vue'

export default {
    name: "custom-def",
    mixins: [ComponentDef,GridMixin],
    data() {
        return {
            labelCol: { span:4 },
            wrapperCol: { span:20 },
            config:{
                customSql:"",
                alias:"",
                name:"",
                showName:true,
                fullBtn: false,
                receive: {
                    //url,event
                    type: '',
                    publishComponent: '',
                    mapping: [],
                },
                publish: {
                    paramMapping: [],
                },
                mode:"config",
                template:"",
                path:""
            },
            valueSourceDef: [
                { value: 'param', label: this.$ti18('rxForm.param','参数传入') },
                { value: 'fixedVar', label: this.$ti18('rxForm.fixedVar','固定值') },
                { value: 'script', label: this.$ti18('rxForm.script','脚本') },
                { value: 'constantVar', label: this.$ti18('rxForm.constantVar','常量') },
            ],
            sourceAry: [
                { value: 'url', label: this.i18n('form.incomParam','来自传入参数') },
                { value: 'event', label: this.$comi18('formDef.fromComponent', '来自组件') },
            ],
            selectedRowKeys: [],
            componentParamsDef: [],
            publishComponent: [],
            paramsDef: [],
        }
    },
    computed: {
        receiveRowSelection() {
            return {
                selectedRowKeys: this.selectedRowKeys,
                onChange: this.onSelectChange,
            }
        },
    },
    created() {
        this.init();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formChartDef", key);
        },
        init() {
            if (this.conf) {
                this.config = this.conf;
            }
            this.publishComponent = this.getPublishOptions();
            //自定义查询
            if(this.config.customSql){
                var customSql= JSON.parse(this.config.customSql);
                this.getCustomSqlByAlias(customSql.value);
            }
            if(this.config.receive  && this.config.receive.publishComponent){
                this.changeComponent(this.config.receive.publishComponent)
            }
        },
        openButtonConfig(){
            var self=this;
            var conf = {
                component: CustomButtonConfig,
                widthHeight: ['1200px', '600px'],
                data: {
                    customConfig: this.config,
                },
                curVm: this,
                zIndex:10000,
                title: this.i18n('form.buttonConfiguration','按钮配置')
            }
            Util.open(conf, function (action, data) {
                if (action != 'ok') return;
                self.config.customBtnJson=JSON.stringify(data);
            });
        },
        openCustomData(){
            var self=this;
            Dialog.openCustomDataDialog({
                curVm: this, widthHeight: ['872px', '594px'],
                zIndex:99999
            }, function (self, data) {
                if(data){
                    if(!self.config.alias){
                        self.config.alias=data.key;
                    }
                    if(!self.config.name){
                        self.config.name=data.name;
                    }
                    self.setCustomSql(data);
                }
            })
        },
        setCustomSql(data){
            this.config.customSql = JSON.stringify({
                value:data.key,text:data.name
            });
            //条件参数
            if(data.whereField){
                this.paramsDef=[]
                var whereFields=JSON.parse(data.whereField);
                for (let i = 0; i < whereFields.length; i++) {
                    this.paramsDef.push({
                        value:whereFields[i].fieldName,
                        label:whereFields[i].comment
                    })
                }
            }
            //返回字段
            if(data.resultField){
                this.config.publish.paramMapping=[];
                var resultFields=JSON.parse(data.resultField);
                for (let i = 0; i < resultFields.length; i++) {
                    this.config.publish.paramMapping.push({
                        key:resultFields[i].fieldName,
                        label:resultFields[i].comment
                    })
                }
            }
        },
        handInput(data) {
            if (!data) {
                this.config.customSql = '';
            }
        },
        onSelectChange(selectedRowKeys) {
            this.selectedRowKeys = selectedRowKeys
        },
        openScriptQuery(record) {
            Dialog.openScripttextDialog(
                {
                    curVm: this,
                    widthHeight: ['800px', '600px'],
                    zIndex:9999,
                    data: { script: record.valueDef },
                },
                function (self, data) {
                    record.valueDef = data
                }
            )
        },
        changeComponent(val) {
            if(!val){
                return;
            }
            if (this.config.alias == val) {
                this.config.receive.publishComponent = ''
                this.$notification.warning({ message: this.$ti18('rxMsa.tipsInfo','提示信息'), description: this.$ti18('msa.notSelSel','发布事件组件不能选择自己!','ChartDef')})
                return
            }
            this.componentParamsDef = this.getPubParams(val);
        },
        getPublishOptions() {
            var ary = this.getPublishComponents();
            var rtn = [];
            for (var i = 0; i < ary.length; i++) {
                var config = ary[i].config;
                var obj = {value: config.alias, label: config.name};
                rtn.push(obj);
            }
            return rtn;
        },
        addParams() {
            if (this.config.receive.type == 'url') {
                if (!this.params || this.params.length==0) {
                    this.$notification.warning({
                        message: this.$ti18('rxMsa.tipsInfo','提示信息'),
                        description: this.i18n('msg.configure','未配置传入参数，请去配置!'),
                    })
                    return;
                }
            }
            this.config.receive.mapping.push({ idx_: Util.randomId(), name: '', valueSource: '', valueDef: '' })
        },
        removeSelect() {
            this.removeRows(this.config.receive.mapping, this.selectedRowKeys)
        },
        getCustomSqlByAlias(alias) {
            if (alias) {
                FormCustomQueryApi.getByKey({key: alias}).then(res => {
                    if(res.success && res.data){
                        this.setCustomSql(res.data);
                    }
                });
            }
        },
        openCustomViewTemplate(){
            var self=this;
            var conf = {
                component: CustomViewTemplate,
                data: {
                    config: this.config,
                },
                curVm: this,
                zIndex:10000,
                max:true,
                title: this.i18n('list.temConfig','模板配置') + '(HTML)'
            }
            Util.open(conf, function (action, data) {
                if (action != 'ok') return;
                self.$set(self.config, "template", data.template);
                self.$set(self.config, "jsScript", data.jsScript);
                self.$set(self.config, "cssStyle", data.cssStyle);
            });
        }
    },
    watch:{
        config:{
            handler: function (val, oldVal) {
                var self_ = this ;
                setTimeout(function (){
                    self_.$emit('dragclick',val);
                },500);
            },
            deep: true
        }

    }
}
</script>

<style scoped>
.formdeList >>> .my-select{
    right: 0!important;
    left: auto!important;
    max-height:160px;
    overflow:hidden
}
.formdeList{
    padding: 0 10px;
}
</style>